<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta property="fb:admins" content="1227408500" />
<link rel="apple-touch-startup-image" href="remoku-splash.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-ipad-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-iphone4-precomposed.png" />
<title>Remoku</title>
<meta name="description" content="A web app for Roku remote control" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="remoku-gui.css" media="screen" /> 
<link rel="help" type="text/html" href="http://help.remoku.tv" />
<script src="color-utils.js"></script>
<script src="cp/colorPicker.js"></script>
<script src="remoku-gui.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28924199-1']);
  _gaq.push(['_setDomainName', 'remoku.tv']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body id="body" class="bgcolor">
<table id="navtable" class="bgcolor">
  <tr>
	<td>
	<a class="nav active" id="navremote">
	<div>Remote</div>
	<img class="remoteicons" id="navremoteimg" src="images/DPad.png" >
	</a>
	</td>
	<td>
	<a class="nav" id="navgoodies">
	<div>Goodies</div>
	<img class="remoteicons" src="images/goodies.png">
	</a>
	</td>
	<td class="hidden">
	<a class="nav" id="navapps"> 
	<div>Channels</div> 
	<img class="remoteicons" src="images/application_view_tile.png">
	</a>
	</td>
	<td>
	<a  class="nav" id="navconfig"> 
	<div>Settings</div> 
	<img class="remoteicons" src="images/setting_tools.png">
	</a>
	</td>
	<td>
	<div class="hslice" id="Remoku">
	<a  class="nav" id="navabout"> 
	<div>About</div> 
	<img class="remoteicons" src="images/about.png">
	</a>
	<span class="entry-title" style="display:none;">Remoku</span>
	<a rel="entry-content" href="http://remoku.tv" style="display:none;"></a>
	</div> 
	</td>
</table>
<div id="screens">
<div id="remote" class="visible">
<table id="remotetable">
	<tr>
		<td colspan="3">
			<div id="text">
				<span id="searchline"><input id="textentry" class="bgcolor" type="text" tabindex="1" value="Loading..."><button id="sendtext">Send</button></span>
			</div>
		</td>
	</tr>
	<tr>
		<td rowspan="6"><img src="images/left_edge.png"></td>
		<td>
			<table >
				<tr>
					<td><img src="images/back.png" class="link" id="Back"></td>
					<td><img src="images/home.png" class="link" id="Home"></td>
				</tr>
			</table>
		</td>
		<td rowspan="6"><img src="images/right_edge.png"></td>
	</tr>
	<tr>
		<td>
			<table >
				<tr>
					<td><img src="images/top_left_corner.png"></td>
					<td><img src="images/up.png" class="link" id="Up"></td>
					<td><img src="images/top_right_corner.png"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table >
				<tr>
					<td><img src="images/left.png" class="link" id="Left"></td>
					<td><img src="images/ok.png" class="link" id="Select" tabindex="2"></td>
					<td><img src="images/right.png" class="link" id="Right"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table >
				<tr>
					<td><img src="images/bottom_left_corner.png"></td>
					<td><img src="images/down.png" class="link" id="Down"></td>
					<td><img src="images/bottom_right_corner.png"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table >
				<tr>
					<td><img src="images/replay.png" class="link" id="InstantReplay"></td>
					<td><img src="images/info.png" class="link" id="Info"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table >
				<tr>
					<td><img src="images/previous.png" class="link" id="Rev"></td>
					<td><img src="images/play.png" class="link" id="Play"></td>
					<td><img src="images/next.png" class="link" id="Fwd"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td colspan="3"><div id="rokuNameDiv">
				<div id="nameline">Remoku</div>
			</div>
		</td>
	</tr>
</table>

<div class="box hidden" id="notifications">
Remoku has an update available.<br>
<a href="#" id="reloadlink">Reload</a> to start using it.
</div>
<table id="favtable">
<tr> <td id="fav1"></td> <td id="fav2"></td> <td id="fav3"></td> </tr>
</table>
<div id="lowerremotespopup" class="hidden"></div>
</div>

<div id="goodies" class="hidden">
	<fieldset><legend>Macros</legend>
	<select id="macroSelect"></select><button id="runCustomMacro">Run</button><br>
	<input id="custommacroinput"><button id="addMacro">Save</button><button id="removeMacro">Remove</button><br>
	<textarea id="macroArea"></textarea><br><div id="macroerror"></div>
	See <a href="http://help.remoku.tv" class="bgcolor" target="_blank">help.remoku.tv</a> for macro command reference.
	</fieldset>
	<fieldset>
	<legend>Shoutcast Channel</legend>
	<label>Station Name:</label><input id="sc_name" value="My Station"><br>
	<label>Station URL:</label><input id="sc_url" value="http://my.shoutcast.url/station.pls" />
	<button id="sc_launch">Launch Shoutcast</button>
	</fieldset>
	<fieldset><legend>Channel Store</legend> <label>Focus App id:</label><input id="chstoreappid"  value="12" />
	<button id="chs_macro">Launch Channel Store</button><br>
	<div id="channelslink" class="bgcolor"></div>
	</fieldset>
	<div class="box hidden" id="goodieLaunch">
		<h2>Launch Remoku Channel</h2>
		<label>Add launch parameter</label><br>
		<input id="lkey" value="videoUrl">=<input id="lvalue" value="http://video.ted.com/talks/podcast/CraigVenter_2008_480.mp4" />
		<button id="lparamdo">Add</button>
	</div>
</div>

<div id="apps" class="hidden">
<ul id="applist">
</ul>
</div>

<div id="config" class="hidden">
<div id="firstsetup" class="hidden">
	<div class="box">
		<h2>Welcome to Remoku, a web app for Roku Remote Control</h2>
		To begin, Remoku needs to know the address of your Roku(s).<br><br>The Scan button below will look for Roku devices on your network.<br><br>The default network, 192.168.1.X, may not be the same as your network; so if the scan doesn't find any Rokus, look for help at <a href="http://help.remoku.tv" target="_blank" class="bold">help.remoku.tv</a>.
	</div>
</div>
<fieldset id="controlcontainer">
	<legend>Control This Roku</legend>
		<select id="rokus"></select><br>
		<label>Name this roku:<label><input class"nameinput" id="rokuname" value="Living Room" />
</fieldset>
<fieldset>
	<legend>Find My Roku</legend>
	<label>My Network: </label>
	<input class="address" id="octet1" value="192" /> .
	<input class="address" id="octet2" value="168" /> .
	<input class="address" id="octet3" value="1" /> . X
	<br>
	<label>How Many Rokus? </label>
	<select id="num">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12">12</option>
		<option value="13">13</option>
		<option value="14">14</option>
		<option value="15">15</option>
	</select> 
	<button id="scanforroku">Scan</button>
	<div id="scanresults" class="hidden"></div>
	<br><a href="http://help.remoku.tv/#TOC-Search-Help" target="_blank" class="bgcolor" >Search Help</a><br>
	<label>Manual Add: </label><input class="maddress" id="maddress" value="192.168.1.3" /><button id="addroku">+</button><br>
	<form><label>Remove this: </label><select id="manualrokus" disabled></select><button id="removeroku">-</button></form>
</fieldset>
<fieldset>
	<legend>Colors</legend>
	<label>Background Color: #</label><input class="tweakinput" id="bgcolor" value="101010"  onclick="colorPicker(event,'B',1, 1)"/><br>
	<label>Foreground Color: #</label><input class="tweakinput" id="fgcolor" value="101010"  onclick="colorPicker(event,'B',1, 1)"/><br>
</fieldset>
<fieldset>
	<legend>Favorites</legend>
	<input type="checkbox" name="showFaves" id="showFaves"/><label>Show Favorites</label><br>
	<label>Favorite 1: </label><input class="tweakinput" id="inputfav1" value="12"/><br>
	<label>Favorite 2: </label><input class="tweakinput" id="inputfav2" value="28"/><br>
	<label>Favorite 3: </label><input class="tweakinput" id="inputfav3" value="2016"/><br>
		<div id="channelslink2" class="bgcolor"></div>

</fieldset>

<fieldset>
<legend>Profile Management</legend>
	<button id="exportsettings">Export Settings</button><button id="importsettings">Import Settings</button><br>
	<textarea id="settingstextarea"></textarea><br>
	Use this field to copy and paste settings for export and import.<br><br>
	<button id="wipesettings">Wipe Settings</button>
</fieldset>

	<div class="box hidden">
		<h2>Apps</h2>First<br>Install Remoku Channel<br>Then<br>
		<button id="startremoku">Launch Remoku Channel</button><br>Then<br>
		<button id="loadapps">Load Channel List</button>
	</div>
	
</div>
<div id="about" class="hidden">
	<fieldset><legend>Remoku</legend>
  A web app for Roku remote control.<br>
	<div class="smalltext">Get help with using Remoku at <a href="http://help.remoku.tv/" target="_blank" class="bgcolor" id="helplink">help.remoku.tv</a></div>
	</fieldset>
	<fieldset><legend>Version</legend>
	<div id="ver" class="smalltext"></div>
	</fieldset>
	<fieldset>
		<legend>Debug Output</legend>
		<div id="dbgOut" class="smalltext"></div>
	</fieldset>
</div>
<div id="remotespopup" class="hidden"></div>
</div>
</body>
</html>